import "./BookListPage.scss";
import { ReactComponentPage } from "../../class/ReactComponentPage";
import React from "react";
import {Button, message} from "antd";
import { Link } from "react-router-dom";
import {TableBookList} from "../../../common/class/TableBookList";
import tableBookList from "../../../common/function/tableBookList";
import {BookItemCard} from "../../components/BookItemCard/BookItemCard";

export namespace BookListPage {
    export interface Props extends ReactComponentPage.Props {
    }

    export interface State extends ReactComponentPage.State {
        filteredList: TableBookList.Data[];
    }
}

export class BookListPage extends ReactComponentPage<BookListPage.Props, BookListPage.State> {
    public readonly state: BookListPage.State = {
        filteredList: [],
    };
    protected list: TableBookList.Data[] = [];
    public render() {
        return (
            <div className={this.getClsName("book-list-page-component")}>
                <h3 className="page-title">书籍目录</h3>
                <div className="first-row">
                    <Button type="primary">
                        <Link to="/">返回首页</Link>
                    </Button>
                </div>
                <div className="list-row">{this.getBookList()}</div>
            </div>
        );
    }
    public componentDidMount(): void {
        this.collectList();
    }
    protected collectList() {
        tableBookList
            .select()
            .findAll()
            .then((rows) => {
                this.updateList(rows as TableBookList.Data[]);
            })
            .catch((err) => {
               console.error(err);
               message.error("获取书籍列表出错");
            });
    }
    protected updateList(rows: TableBookList.Data[]) {
        this.list = rows;
        const list = this.list;
        this.setState({
            filteredList: list,
        });
    }
    protected getBookList() {
        return this.state.filteredList.map((bookItem, index) => {
            return (<BookItemCard key={`book-index-${index}-${bookItem.id}`} bookItem={bookItem} />);
        });
    }
}
